<template>
  <div class="test container">
    <div class="head">
      <span class="title">考试列表</span>
      <el-button
        class="history"
        round
        size="small"
        icon="el-icon-view"
        @click="history()"
        >查看考试结果</el-button
      >
    </div>
    <div class="test table">
      <el-table
        :data="tableData"
        v-loading="tableLoading"
        stripe
        @row-click="rowclick"
      >
        <el-table-column prop="id" label="考试id" align="center" width="180"></el-table-column>
        <el-table-column prop="paperId" label="试卷id" align="center" width="180"></el-table-column>
        <el-table-column
          prop="title"
          label="考试标题"
          align="center"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间"
          align="center"
          width="220"
        >
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="结束时间"
          align="center"
          width="220"
        >
        </el-table-column>

        <el-table-column label="状态" align="center">
          <template v-slot="{ row }">
            <el-tag class="dangerTag" v-if="row.status == 'DISABLE'"
              >关闭中</el-tag
            >
            <el-tag v-else>开放</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParam.pageNum"
      :page-sizes="[5, 10, 20, 30, 50]"
      :page-size="queryParam.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
    >
    </el-pagination>
    <el-dialog
      :visible.sync="dialogVisible"
      center
      width="30%"
      :before-close="handleClose"
    >
      <span slot="title" class="dialog-title">确认开始</span>
      <span>{{ tableRow.title }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          v-if="tableRow.status == 'ENABLE'"
          type="primary"
          @click="enterTest(tableRow)"
          >开始考试</el-button
        >
        <el-button v-else disabled type="primary">开始考试</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTaskListByClass } from "@/api/task.js";
import { get } from "lodash";
export default {
  name: "test",
  data: function() {
    return {
      tableRow: {},
      queryParam: {
        pageNum: 1,
        pageSize: 10
      },
      dialogVisible: false,
      tableLoading: false,
      totalSize: 0,
      tableData: []
    };
  },
  mounted() {},
  created() {
    this.getTableData();
  },
  activated() {
    this.getTableData();
  },
  methods: {
    enterTest(row) {
      if (new Date(row.endTime).getTime() - new Date().getTime() <= 0) {
        this.$message.info("当前考试已截止");
      } else {
        this.$router.push({ name: "testDetail", params: { taskData: row } });
      }
    },
    getTableData() {
      // console.log(JSON.parse(localStorage.getItem("user")).schoolId);
      let obj = {
        pageNum: this.queryParam.pageNum,
        pageSize: this.queryParam.pageSize,
        classId: get(
          JSON.parse(localStorage.getItem("user")),
          "classList[0].id",
          -1
        )
      };
      this.tableLoading = true;
      getTaskListByClass(obj)
        .then(res => {
          // console.log(res);
          this.tableData = res.data.records;
          this.totalSize = res.data.total;
        })
        .catch(() => {
          this.$message.error("获取任务列表失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    rowclick(row) {
      if (new Date(row.startTime.replace(/-/g,'/')).getTime() - new Date().getTime() >= 0) {
        this.$message.info("考试还未开始");
      } else {
        this.tableRow = row;
        this.tableRow.status ="ENABLE";
        this.dialogVisible = true;
      }
    },
    history() {
      this.$router.push({ path: "./studentViewResults" });
    },
    handleSizeChange(size) {
      this.queryParam.pageSize = size;
      this.getTableData();
    },
    handleCurrentChange(page) {
      this.queryParam.pageNum = page;
      this.getTableData();
    },
    handleClose(done) {
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped>
.dialog-title {
  color: #409eff;
}
.container {
  height: 100%;
  width: 100%;
  margin: 0px;
}
.el-table {
  padding-top: 20px;
  width: 90%;
  margin: auto;
}
.head {
  position: relative;
}
.el-tag.el-tag--light.dangerTag {
  background-color: #fef0f0 !important;
  border-color: #fde2e2;
  color: #f56c6c;
}
.title {
  font-size: 30px;
  color: #409eff;
  margin-bottom: 30px;
  font-weight: bold;
}
.currentTime {
  position: absolute;
  font-size: 10px;
  left: 0;
  cursor: pointer;
  text-decoration: underline;
  color: #409eff;
}

.history {
  display: inline-block;
  font-size: 15px;
  color: #fd7d8c;
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 60px;
  cursor: pointer;
}
.history:hover {
  text-decoration: underline;
}
.enter {
  cursor: pointer;
  color: #5b8bff;
}
.enter:hover {
  color: red;
  text-decoration: underline;
}
</style>
